<template>
	<!--<p>{{msg}}</p>-->
	<div>
		<div class="header2">
			<router-link class="mui-icon mui-icon-arrowleft sp" to="/connect"></router-link>
			<span class="sp1">国产果蔬</span>
		</div>
		<ul class="ull">
			<li @click='dian(index)' v-for='(i,index) in arr'>{{i}}</li>
			<a class="dt"></a>
		</ul>
		<div class="taozi">
			<p class="p1"v-for='(x,index) in moren' @click="skip(x)">
				<span class="spp1"><img :src="x.imgs"></span>
					<span class="spp2">{{x.names}}</span>
					<span class="spp3">规格:480g</span>
					<span class="spp3">{{x.delivery}}</span>
					<span class="xb"><span class="spp4">¥{{x.price}}</span><span class="spp5"><img src="../assets/cart.png"></span></span>
			</p>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Xiang',
		data(){
			return{
				Arr1:[],
   				Arr2:[],
   				moren:[],
				arr:["全部","其他水果"],
				bol:false
			}
		},
		created:function(){
				var url='http://www.yanhanbo.top/user/origin.php?names=&imgs=&standard=&genre=&delivery=&price=&type=%E6%89%80%E6%9C%89';
		  		var _self=this;
		    	$.get(url,function(data){
		    	    _self.Arr1 = JSON.parse(data).data.slice(0,18);
		    	    _self.Arr2 = JSON.parse(data).data.slice(20,40);
		    	    _self.moren = _self.Arr1;
		    	    console.log(_self.moren)
		    	    _self.list = [_self.Arr1,_self.Arr2]
					console.log(_self.list)
					$(".ull li").click(function(){
						console.log(_self.list[$(this).index()]) 
						 _self.moren = _self.list[$(this).index()];
					})
			})
		    	
		},
		destroyed:function(){
			
		},
		methods:{
			dian:function(index){
				console.log(index)
				$(".dt").animate({"left":18*index+"%"},200)
				$(".ull li").eq(index).css("color","red").siblings().css("color","#000")
			},
			skip:function(i){
					localStorage.detail = JSON.stringify(i);
					console.log(i.imgs)
//					console.log("点击"+localStorage.detail);
					this.$router.push({ name: 'Detailpage1'});
					$("#list").hide();
				}
		}
	}
</script>

<style>
	html{
		width:100%;
		/*height:100%;*/
		background: #f7f7f7;
	}
	.header2{
		width:100%;
		background: red;
		height:3rem;
		display: flex;
		justify-content: flex-start;
		line-height: 3rem;
		position: fixed;
		top:0;
		left: 0;
	}
	.sp{
		width:10%;
		margin-top: 1%;
		color:#fff;
	}
	.sp1{
		width:90%;
		font-size: 1.1rem;
		color:#fff;
		margin-left: -1.5rem;
		text-align: center;
	}
	.ull{
		width:100%;
		position:fixed;
		left:0;
		top:3rem;
		background: #f7f7f7;
	} 
	.ull li{
		float: left;
		font-size: 1rem;
		width:18%;
		text-align: center;
	}
	.ill li:nth-child(1){
		color:red;
	}
	.dt{
		width:18%;
		height:0.2rem;
		background: red;
		position: absolute;
		top:1.8rem;
		left:0;
	}
	.taozi{
		width:100%;
		height:600px;
		margin-top: 5rem;
		display: flex;
		justify-content:flex-start;
		flex-wrap: wrap;
	}
	.p1{
		width:48%;
		margin-left: 1.2%;
		background: #fff;
	}
	.spp1{
		width:100%;
		text-align: center;
		
	}
	.spp1 img{
		width:40%;
		margin-left: 30%;
		padding-top: 1rem;
	}
	.spp2{
		width:95%;
		display: block;
		margin: 0 auto;
		font-size: 1rem;
		color:#000;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.spp3{
		font-size: 1rem;
		color:#666;
		text-align: start;
		display: block;
		width:95%;
		margin: 0 auto;
	}
	.xb{
		/*display: block;*/
		width: 100%;
		/*margin: 0 auto;*/
		display: flex;
		justify-content: space-around;
	}
	.spp4{
		display: block;
		text-align: start;
		width:50%;
		/*margin: 0 auto;*/
		font-size: 1.1rem;
		color:red;
		margin-bottom: 1rem;
	}
	.spp5{
		width:46%;
		margin-bottom: 1rem;
		text-align: right;
	}
	.spp5 img{
		width:30%;
	}
</style>